<template>
  <view>
    <up-sticky bgColor="#fff">
      <view class="user-list-box">
        <view class="user-list" :style="{ with: 100 * userList.length + 'rpx' }">
          <view
            class="user-list-item"
            :class="{ active: activeId == item.id }"
            v-for="(item, index) in userList"
            :key="index"
          >
            <view class="icon-box">
              <image :class="{ first: index == 0 }" class="icon" :src="item.icon"></image>
            </view>
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </up-sticky>
    <cardlist></cardlist>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import cardlist from './cardlist.vue'
import two from '@/static/images/2.png'
import eleven from '@/static/images/11.jpg'
import twentyTwo from '@/static/images/22.jpg'

const userList = ref([
  {
    name: '全部',
    icon: two,
    id: 0,
  },
  {
    name: '黑公子私人武装力量',
    icon: eleven,
    id: 1,
  },
  {
    name: '爱克斯光年',
    icon: twentyTwo,
    id: 2,
  },
  {
    name: '全部',
    icon: eleven,
    id: 3,
  },
  {
    name: '黑公子私人武装力量',
    icon: eleven,
    id: 4,
  },
  {
    name: '爱克斯光年',
    icon: twentyTwo,
    id: 5,
  },
  {
    name: '全部',
    icon: eleven,
    id: 6,
  },
  {
    name: '黑公子私人武装力量',
    icon: twentyTwo,
    id: 7,
  },
  {
    name: '爱克斯光年',
    icon: eleven,
    id: 8,
  },
  {
    name: '全部',
    icon: twentyTwo,
    id: 9,
  },
])

const activeId = ref(2)

// 测试 uni API 自动引入
onLoad(() => {})
</script>

<style scoped lang="scss">
.user-list-box {
  width: 100%;
  overflow-y: hidden;
  .user-list {
    display: flex;
    height: 240rpx;
  }
  .user-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160rpx;
    height: 100%;
    margin: 0 4.8rpx;
    .icon-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 130rpx;
      height: 130rpx;
      background-image: url(@/static/images/1.png);
      background-size: 100% 100%;
      box-shadow: 0 0 0 0 5px black;
      .icon {
        width: 100%;
        width: 106rpx;
        height: 100%;
        height: 106rpx;
        border-radius: 18rpx;
      }
      .first {
        transform: scale(0.8);
      }
    }
    .name {
      width: 100%;
      width: 115.2rpx;
      padding: 7rpx;
      overflow: hidden;
      font-size: 21rpx;
      color: #999999;
      text-align: center;
      text-overflow: ellipsis;
      word-wrap: none;
      white-space: nowrap;
    }
    &.active {
      .icon-box {
        background-image: url(@/static/images/1.png);
      }
      .icon {
        display: block;
        border: 4rpx solid #333333;
      }
      .name {
        color: #ffffff;
        background: #333333;
        border-radius: 50rpx;
      }
    }
  }
}
</style>
